<template>
  <div class="bind-notice-box">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item label="公告标题" prop="ntTitle">
        <el-input
          v-model="queryParams.ntTitle"
          placeholder="请输入公告标题"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="开标时间" prop="openTime">
        <el-date-picker
          clearable
          v-model="queryParams.openTime"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择开标时间"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="截止时间" prop="ntEndTime">
        <el-date-picker
          clearable
          v-model="queryParams.ntEndTime"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择投标截止时间"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          v-hasPermi="['purs:notice:add']"
          @click="addNotice"
          >新增</el-button
        >
      </el-col>

      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <el-tabs v-model="statuActiveName" @tab-click="handleClickStatu">
      <el-tab-pane label="待提交" name="plan">
        <el-table v-loading="loading" :data="noticeList">
          <el-table-column type="selection" width="55" align="center" />
          <!-- 添加序号列 -->
          <el-table-column
            label="序号"
            type="index"
            width="70"
            align="center"
            index-method="indexMethod"
          />
          <el-table-column label="招标项目" align="center" prop="bindCode" />
          <el-table-column label="公告标题" align="center" prop="ntTitle" />

          <el-table-column label="审批状态" align="center" prop="ntStatus">
            <template slot-scope="scope">
              <dict-tag
                :options="dict.type.pur_notice_statu"
                :value="scope.row.ntStatus"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="checkReason(scope.row)"
                v-hasPermi="['purs:notice:edit']"
                >审批结果</el-button
              >
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdate(scope.row)"
                v-hasPermi="['purs:notice:edit']"
                >修改</el-button
              >
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
                v-hasPermi="['purs:notice:remove']"
                :disabled="openMessage.status > 3"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-tab-pane>
      <el-tab-pane label="待审批" name="ready">
        <el-table v-loading="loading" :data="noticeList">
          <el-table-column type="selection" width="55" align="center" />
          <!-- 添加序号列 -->
          <el-table-column
            label="序号"
            type="index"
            width="70"
            align="center"
            index-method="indexMethod"
          />
          <el-table-column label="招标项目" align="center" prop="bindCode" />
          <el-table-column label="公告标题" align="center" prop="ntTitle" />

          <el-table-column label="审批状态" align="center" prop="ntStatus">
            <template slot-scope="scope">
              <dict-tag
                :options="dict.type.pur_notice_statu"
                :value="scope.row.ntStatus"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="checkPass(scope.row)"
                v-hasPermi="['purs:notice:edit']"
                >审批</el-button
              >
              <el-button
                size="mini"
                type="text"
                icon="el-icon-close"
                @click="checkFial(scope.row)"
                v-hasPermi="['purs:notice:edit']"
                >驳回</el-button
              >
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdate(scope.row)"
                v-hasPermi="['purs:notice:edit']"
                >修改</el-button
              >
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
                v-hasPermi="['purs:notice:remove']"
                :disabled="openMessage.status > 3"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-tab-pane>
      <el-tab-pane label="待发布" name="success">
        <el-table v-loading="loading" :data="noticeList">
          <el-table-column type="selection" width="55" align="center" />
          <!-- 添加序号列 -->
          <el-table-column
            label="序号"
            type="index"
            width="70"
            align="center"
            index-method="indexMethod"
          />
          <el-table-column label="招标项目" align="center" prop="bindCode" />
          <el-table-column label="公告标题" align="center" prop="ntTitle" />

          <el-table-column label="审批状态" align="center" prop="ntStatus">
            <template slot-scope="scope">
              <dict-tag
                :options="dict.type.pur_notice_statu"
                :value="scope.row.ntStatus"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="sendNotice(scope.row)"
                v-hasPermi="['purs:notice:edit']"
                >发布</el-button
              >
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
                v-hasPermi="['purs:notice:remove']"
                :disabled="openMessage.status > 3"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-tab-pane>
      <el-tab-pane label="已发布" name="cass">
        <el-table v-loading="loading" :data="noticeList">
          <el-table-column type="selection" width="55" align="center" />
          <!-- 添加序号列 -->
          <el-table-column
            label="序号"
            type="index"
            width="70"
            align="center"
            index-method="indexMethod"
          />
          <el-table-column label="招标项目" align="center" prop="bindCode" />
          <el-table-column label="公告标题" align="center" prop="ntTitle" />

          <el-table-column label="审批状态" align="center" prop="ntStatus">
            <template slot-scope="scope">
              <dict-tag
                :options="dict.type.pur_notice_statu"
                :value="scope.row.ntStatus"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
                v-hasPermi="['purs:notice:remove']"
                :disabled="openMessage.status > 3"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-tab-pane>
    </el-tabs>

    <!--新增-->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="55%"
      :before-close="handleClose"
    >
      <el-descriptions
        class="margin-top"
        :column="2"
        :size="size"
        border
        style="width: 720px; margin: 0 auto"
      >
        <el-descriptions-item>
          <template slot="label">
            <span class="font-custom">公告标题</span>
          </template>
          <div class="display-notice">
            <el-input v-model="notice.ntTitle"></el-input>
          </div>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <span class="font-custom">关联项目</span>
          </template>
          <div class="display-notice">
            <el-input v-model="bindItem.bindName"></el-input>
          </div>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <span class="font-custom">获取时间</span>
          </template>
          <el-date-picker
            type="datetime"
            placeholder="选择日期时间"
            default-time="12:00:00"
            v-model="notice.ntBeginTime"
          >
          </el-date-picker>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <span class="font-custom">截至时间</span>
          </template>
          <el-date-picker
            type="datetime"
            placeholder="选择日期时间"
            default-time="12:00:00"
            v-model="notice.ntEndTime"
          >
          </el-date-picker>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <span class="font-custom">答疑时间</span>
          </template>
          <el-date-picker
            type="datetime"
            placeholder="选择日期时间"
            default-time="12:00:00"
            v-model="notice.officeTime"
          >
          </el-date-picker>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <span class="font-custom">开标时间</span>
          </template>
          <el-date-picker
            type="datetime"
            placeholder="选择日期时间"
            default-time="12:00:00"
            v-model="notice.openTime"
          >
          </el-date-picker>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <span class="font-custom">上传附件</span>
          </template>
          <FileUpload
            :syncedMessage.sync="fileInfo"
            ref="childrenFile"
            style="margin-left: 10px"
          ></FileUpload>
        </el-descriptions-item>
      </el-descriptions>
      <div class="remark-style">备注:</div>
      <Editor class="editor-box" ref="children"></Editor>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="驳回原因"
      :visible.sync="failDialogVisible"
      width="50%"
      :before-close="handleCloseBack"
    >
      <el-input type="textarea" v-model="notice.reason"></el-input>

      <span slot="footer" class="dialog-footer">
        <el-button @click="fileCansel">取 消</el-button>

        <el-button type="primary" @click="noticeFail" v-show="openCode == 2"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
  
  <script>
import {
  listNotice,
  getNotice,
  delNotice,
  addNotice,
  updateNotice,
  updateNoticeSendTime,
  updateRemark,
} from "@/api/purs/notice";

import { updateBind } from "@/api/purs/bind";

import { deleteFile, getPurCode } from "@/api/purs/purs";

import {
  addBindFiles,
  delBindFilesByFileName,
  listBindFiles,
  delFileNameByBindCode,
} from "@/api/purs/bindFiles";

export default {
  name: "Notice",
  props: {
    openMessage: {
      type: Object,
    },
  },
  dicts: ["pur_notice_statu"],
  data() {
    return {
      fileInfo: {},
      failDialogVisible: false,
      notice: {},
      size: "medium",
      // 遮罩层
      loading: true,
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 招标公告表格数据
      noticeList: [],
      // 弹出层标题
      bindItem: {},

      queryParams: {
        pageNum: 1,
        pageSize: 10,
        ntTitle: null,
        ntEndTime: null,
        ntBeginTime: null,
        projectFunding: null,
        officeTime: null,
        openTime: null,
        ntStatus: 2,
      },
      dialogVisible: false,
      bindFile: {},
      statuActiveName: "ready",
      queryFile: {
        noticeCode: "",
      },
      updateFileList: [],
      submitStatu: 1,
      openCode: 1,
      testQuery: {},
    };
  },
  watch: {
    fileInfo: {
      handler(value) {
        if (value.code == 1) {
          this.bindFile.fileName = value.fileName;
          this.bindFile.filePath = value.filePath;
          this.bindFile.type = 2;
          this.bindFile.fileSize = parseFloat(value.fileSize / 1000);
          this.bindFile.creater = sessionStorage.getItem("userName");
          this.bindFile.bindCode = this.bindItem.bindCode;
          this.bindFile.noticeCode = this.notice.ntId;
          addBindFiles(this.bindFile).then((res) => {
            if (res.code == 200) {
              this.uploadFlag = false;
              this.$modal.msgSuccess("上传成功");
            }
          });
        } else {
          //删除文件
          this.bindFile.fileName = value.name;
          deleteFile(this.bindFile.fileName).then();
          delBindFilesByFileName(this.bindFile.fileName).then((res) => {
            if (res.code == 200) {
              this.$modal.msgSuccess("删除成功");
            }
          });
        }
      },
    },
  },
  mounted() {
    this.bindItem = this.openMessage;
    this.getList();
  },
  created() {
    this.fileInfo.id = 1;
  },
  methods: {
    //查看驳回原因
    checkReason(row) {
      this.notice.reason = row.reason;
      this.failDialogVisible = true;
      this.openCode = 1;
    },
    fileCansel() {
      this.notice = {};

      this.failDialogVisible = false;
    },

    noticeFail() {
      delete this.notice.remark;
      this.notice.ntStatus = 1;
      updateNotice(this.notice).then((res) => {
        if (res.code == 200) {
          this.$modal.msgSuccess("已驳回");
          this.updateFileList = [];
          this.notice = {};
          this.getList();
          this.failDialogVisible = false;
        }
      });
    },
    handleCloseBack() {
      this.notice = {};
    },
    //驳回
    checkFial(row) {
      this.notice = row;
      this.openCode = 2;
      console.log(this.openCode == 2);
      this.failDialogVisible = true;
    },

    //发布公告
    sendNotice(row) {
      delete row.remarks;
      let ntId = row.ntId;

      updateNoticeSendTime(ntId).then((res) => {
        if (res.code == 200) {
          this.$modal.msgSuccess("发布成功");
          this.getList();
        } else {
          this.$modal.msgSuccess("发布失败");
        }
      });
    },
    //审批
    checkPass(row) {
      delete row.remarks;
      let obj = row;
      obj.ntStatus = 3;
      delete obj.remarks;
      this.$modal
        .confirm("是否通过标题" + row.ntTitle + "的公告?")
        .then(() => {
          //通过
          updateNotice(obj).then((res) => {
            if (res.code == 200) {
              this.$modal.msgSuccess("已审核");
              this.getList();
            }
          });
        })
        .catch(() => {
          this.$modal.msgError("已取消审核");
        });
    },

    handleClickStatu(tab, event) {
      if (tab.name == "plan") {
        this.queryParams.ntStatus = 1;
      } else if (tab.name == "ready") {
        this.queryParams.ntStatus = 2;
      } else if (tab.name == "success") {
        this.queryParams.ntStatus = 3;
      } else {
        this.queryParams.ntStatus = 4;
      }
      this.getList();
    },

    //修改
    handleUpdate(row) {
      this.submitStatu = 2;
      this.queryFile.noticeCode = row.ntId;
      listBindFiles(this.queryFile).then((res) => {
        if (res.rows.length > 0) {
          res.rows.forEach((item) => {
            let obj = {};
            obj.url = item.filePath;
            obj.name = item.fileName;
            obj.id = item.fileId;
            obj.code = 3;
            this.updateFileList.push(obj);
          });
          this.$refs.childrenFile.test(this.updateFileList);
        }
      });
      this.notice = row;

      this.dialogVisible = true;
    },

    indexMethod(index) {
      // 根据需要自定义序号生成方式，这里只是简单返回索引+1
      return index + 1;
    },

    //提交
    submit() {
      if (this.submitStatu == 1) {
        this.notice.ntStatus = 2;
        this.notice.bindCode = this.bindItem.bindCode;
        let html = this.$refs.children.getValue();
        if (html.length > 540) {
          this.$modal.msgError("文字内容超出.请重新输入");
        } else {
          addNotice(this.notice).then((res) => {
            if (res.code == 200) {
              this.testQuery = {
                remark: html,
                ntId: this.notice.ntId,
              };

              updateRemark(this.testQuery).then((res) => {
                if (res.code == 200) {
                  this.$modal.msgSuccess("新增成功");
                  this.$refs.children.clear();
                  this.$refs.childrenFile.initFile();
                  this.dialogVisible = false;
                  this.notice = {};
                  this.getList();
                }
              });

              let bind = {
                bindCode: this.openMessage.bindCode,
                status: 3,
              };

              updateBind(bind).then();
            }
          });
        }
      } else {
        this.notice.ntStatus = 2;
        updateNotice(this.notice).then((res) => {
          if (res.code == 200) {
            this.$modal.msgSuccess("修改成功");
            this.backInit();
            this.getList();
            this.dialogVisible = false;
          }
        });
      }
    },
    //修改点击后重置
    backInit() {
      this.updateFileList = [];
      this.notice = {};
      this.$refs.childrenFile.initFile();
    },

    //关闭
    handleClose() {
      this.dialogVisible = false;

      this.backInit();
    },

    //新增
    addNotice() {
      let bindCode = this.bindItem.bindCode;

      getNotice(bindCode).then((res) => {
        console.log(JSON.stringify(res));
        if (res.data != null) {
          this.$modal.msgError("该项目已提交招标公告.请勿重复提交");
        } else {
          this.submitStatu = 1;
          let tableName = "pur_bind_notice";
          getPurCode(tableName).then((res) => {
            this.notice.ntId = res.data.encodeNow;
          });
          this.dialogVisible = true;
        }
      });
    },
    /** 查询招标公告列表 */
    getList() {
      this.loading = true;
      this.queryParams.bindCode = this.bindItem.bindCode;

      listNotice(this.queryParams).then((response) => {
        this.noticeList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.backInit();
      this.dialogVisible = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        ntId: null,
        bindCode: null,
        ntTitle: null,
        ntEndTime: null,
        ntBeginTime: null,
        remarks: null,
        ntStatus: null,
        createTime: null,
        projectFunding: null,
        officeTime: null,
        openTime: null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      const ntIds = row.ntId || this.ids;
      this.$modal
        .confirm('是否确认删除招标公告编号为"' + ntIds + '"的数据项？')
        .then(function () {
          return delNotice(ntIds);
        })
        .then(() => {
          console.log(this.bindItem.bindCode);
          delFileNameByBindCode(this.bindItem.bindCode);
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
  },
};
</script>
<style scope>
.font-custom {
  font-size: 15px;
  font-style: italic;
  font-family: "仿宋";
  font-weight: bold;
}
.display-notice .el-input input {
  border: none;
  font-size: 14px;
  font-weight: bold;
  font-family: "仿宋";
}

.editor-box {
  width: 720px;
  margin: 5px auto;
}

.remark-style {
  width: 90px;
  margin-left: 18px;
  text-align: center;
  line-height: 30px;
  margin-top: 10px;
  font-family: "仿宋";
  font-style: italic;
  font-weight: bold;
  font-size: 16px;
}
</style>
  